<template>
  <div class="voting_detail">
    <head-top head-title="详情" goBack="true"></head-top>
    <div v-show="detail.img_moblie_url" class="people_bg"
         :style="'backgroundImage:url('+detail.img_moblie_url+')'"></div>
    <div v-show="!detail.img_moblie_url" class="people_bg2"></div>
    <div class="msg_icon">
      <img v-if="typeShow==2"
           :src="detail.img_moblie_url || ''"
           alt="">
      <img v-if="typeShow==1" style="width: 90px;height: 90px"
           :src="detail.img_moblie_url || ''"
           alt="">
      <p v-if="typeShow==2">{{detail.name}}
        <span v-if="detail.sex===1">男</span>
        <span v-if="detail.sex===0">女</span>
        <span v-if="detail.sex!==1 && detail.sex!==0">保密</span>
      </p>
      <p v-if="typeShow==1" style="font-size: 15px">{{detail.name}}</p>
    </div>
    <ul class="personal_msg" v-if="typeShow==2">
      <li class="border-bottom">
        <span>年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄：</span>
        <span class="font" v-show="detail.age">{{detail.age}}</span>
        <span class="font" v-show="!detail.age">保密</span>
      </li>
      <li class="border-bottom">
        <span>房&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</span>
        <span class="font" v-show="detail.house">{{detail.house}}</span>
        <span class="font" v-show="!detail.house">保密</span>
      </li>
      <li class="border-bottom">
        <span>职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;业：</span>
        <span class="font" v-show="detail.profession">{{detail.profession}}</span>
        <span class="font" v-show="!detail.profession">保密</span>
      </li>
      <li class="border-bottom">
        <span>工作单位：</span>
        <span class="font" v-show="detail.jobs_unit">{{detail.jobs_unit}}</span>
        <span class="font" v-show="!detail.jobs_unit">保密</span>
      </li>
      <li class="border-bottom">
        <span>文化程度：</span>
        <span class="font" v-show="detail.education">{{detail.education}}</span>
        <span class="font" v-show="!detail.education">保密</span>
      </li>
      <li>
        <span>政治面貌：</span>
        <span class="font" v-show="detail.political">{{detail.political}}</span>
        <span class="font" v-show="!detail.political">保密</span>
      </li>
      <li v-show="detail.file_url" @click="goVideo(detail.file_url)">
        <span>视频介绍：</span>
        <span class="font">点击查看</span>
      </li>
    </ul>
    <div class="line"></div>
    <div class="introduce">
      <div class="introduce_title border-bottom">
        <span>简介</span>
      </div>
      <div v-html="detail.content" class="detail">
      </div>
    </div>
  </div>
</template>
<style lang="scss">
  .voting_detail {
    padding-top: 40px;
    overflow: hidden;
    .font {
      font-size: 14px;
    }
    .people_bg {
      width: 100%;
      height: 150px;
      background-position: center;
      background-size: cover;
      opacity: 0.2;
    }
    .people_bg2 {
      width: 100%;
      height: 150px;
      background: url("../../assets/img_bg.jpg");
      background-position: top;
      background-size: cover;
      opacity: 0.5;
      position: relative;
    }
    .msg_icon {
      width: 100%;
      height: 120px;
      position: absolute;
      top: 60px;
      img {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        float: left;
        display: block;
        margin-right: 20px;
        margin-left: 10px;
      }
      p {
        font-size: 26px;
        line-height: 120px;
        span {
          font-size: 20px;
          padding-left: 20px;
        }
      }
    }
    .line {
      width: 100%;
      height: 10px;
      background: #f2f2f2;
    }
    .personal_msg {
      width: 100%;
      li {
        margin: 0 10px;
        height: 44px;
        line-height: 44px;
        span:first-child {
          font-size: 15px;
        }
        span:last-child {
          color: #545454;
          font-size: 14px;
        }
      }
      li:last-child {
        border-bottom: none;
      }
    }
    .introduce {
      .introduce_title {
        margin: 0 10px;
        span {
          font-size: 15px;
          line-height: 44px;
          padding-left: 2px;
        }
      }
      .detail {
        padding: 10px;
        line-height: 24px;
        font-size: 13px;
        p, span {
          font-size: 14px !important;
          color: #666 !important;
        }
        img{
          width: 100%;
        }
      }
    }
  }
</style>
<script>
  import headTop from '../header/Header.vue'
  import commonUrl from '../../common/js/commonUrl.js'
  import {getNewPerSonal} from '../../api/MyIdent'

  export default {
    data () {
      return {
        detail: {},
        typeShow: {
          type: Number
        },
        newold: '', // 判断新老版本
        content: ''
      }
    },
    components: {
      headTop
    },
    created () {
      console.log(this.$route.params)
      this.typeShow = this.$route.params.type
      this.newold = this.$route.params.newold
      if (this.newold === 'new') {
        this._getNewPersonal()
      } else {
        this.getVotingDetail()
      }
    },
    methods: {
      // 老版本
      getVotingDetail () {
        const url = `${commonUrl.apihost}index.php/home/supplement/getCandidateDetail?vote_candidate_id=${this.$route.params.id}`
        this.$http.get(url).then(res => {
          if (res.data.code === 200) {
            this.detail = res.data.data[0]
            // 处理富文本数据中的图片
            this.content = this.detail.content.replace(/<img/gi, '<img style="max-width:100%;height:auto;display:block"')
            // console.log(this.content)
          }
        })
      },
      // 新版本数据
      _getNewPersonal() {
        getNewPerSonal(this.$route.params.id).then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.detail = res.data
            this.content = this.detail.content.replace(/<img/gi, '<img style="max-width:100%;height:auto;display:block"')
          }
        })
      },
      goVideo (url) {
        this.$router.push({
          path: '/home/videoPage',
          query: {
            url: encodeURIComponent(url)
          }
        })
      }
    }
  }
</script>
